<template>
  
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell class="item-line" v-for="item in list" :key="item.id" :title="item.name">{{ item.price }} {{ item.desc }} </van-cell>
    </van-list>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// @ is an alias to /src

import uri from '@/config/uri'
import "@/assets/iconfont/iconfont.css";
import Vue from "vue";
import { Swipe, List,SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(List);
Vue.use(SwipeItem);


export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      foodlist: [],
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // if (localStorage.getItem('foodlist')) {
      //   this.foodlist = JSON.parse(localStorage.getItem('foodlist'))
      //   console.log(this.foodlist)
      //   this.list = this.foodlist
      //   this.finished = true
      // } else {
      this.$http.get(uri.food).then((res) => {
        localStorage.setItem('foodlist', JSON.stringify(res))
        this.foodlist = res
        this.list = this.foodlist
        this.finished = true
      })
      // }
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }

      //   // 加载状态结束
      //   this.loading = false

      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
      // this.loading = false
    },
  },
}
</script>

<style lang="css" scoped>
.item-line {
  height: 5rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
